<template>
  <el-aside :width="isCollapse? 'auto' : '200px'">
    <el-row class="mine-logo">logo</el-row>
    <el-row class="tac">
      <el-col>
        <el-menu
            active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="2"
            text-color="#fff" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
          <el-sub-menu index="1" v-for="menu in routers">
            <template #title>
              <el-icon>
                <location/>
              </el-icon>
              <span>{{ menu.menuName }}</span>
            </template>
            <el-menu-item v-for="cMenu in menu.children"
                          :index="cMenu.id"
                          @click="handleMenuItemClick(cMenu)">{{ cMenu.menuName }}
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-col>
    </el-row>

  </el-aside>
</template>

<script>
import {
  Location,
  Document,
  Menu as IconMenu,
  Setting,
} from '@element-plus/icons-vue'

import {ref, getCurrentInstance} from "vue";

const {ElMessage} = new URL("element-plus", import.meta.url);
import {onMounted} from "vue";
import * as indexApi from '@/api/index/index.js'
import router from "@/router";

export default {
  name: "mine-aside",
  components: {
    Location, Document, IconMenu, Setting,
  },
  setup() {
    const {proxy} = getCurrentInstance()
    const isCollapse = ref(false)
    const routers = ref([])
    const handleOpen = (key, keyPath) => {
    }
    const handleClose = (key, keyPath) => {
    }
    proxy.$bus.on('handleCollapseHeader', data => {
      isCollapse.value = data
    })
    const handleInitMenu = () => {
      indexApi.router().then(res => {
        if (res.success) {
          routers.value = res.data
        } else {
          ElMessage({
            message: res.msg,
            type: 'warning',
          })
        }
      })
    }
    const handleMenuItemClick = (params) => {
      router.push(params.url)
    }
    onMounted(() => {
      handleInitMenu()
    })
    return {
      isCollapse,
      routers,
      handleOpen,
      handleClose,
      handleMenuItemClick
    }
  }

}
</script>

<style scoped>
.el-aside {
  height: 99vh;
  background-color: #545c64;
}

.mine-logo {
  height: 60px;
  background-color: #545c64;
}

/deep/ .el-menu {
  border-right: none;
}


</style>
